<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<style>
    #con {
        width: 750px;
        height: 300px;
        overflow: hidden;
    }

    img {
        width: 750px;
        height: 300px;
    }
</style>
<body>
<div id="app">
    <div id="con">
        <img v-for="(item,i) in imglist" v-show="i===active" :src="item" alt="图片">
    </div>
</div>
<script>
    new Vue({
        el: "#app",
        data() {
            return {
                active: 0,
                imglist: [
                    "http://p1.music.126.net/QYNi1MWZu98KhYGC3fgE-A==/109951166129589746.jpg?imageView&quality=89",
                    "http://p1.music.126.net/X9oObuw2u0HAimURm91HDg==/109951166124747408.jpg?imageView&quality=89",
                    "http://p1.music.126.net/ZrX2nooipBoKOJeRxWtT6w==/109951166127135470.jpg?imageView&quality=89",
                    "http://p1.music.126.net/ZyjpV-MToefd1HKpBxcRtA==/109951166127170984.jpg?imageView&quality=89",
                    "http://p1.music.126.net/UmWr_EMHWCmPHWVuGk2QeA==/109951166127166143.jpg?imageView&quality=89",
                ]
            }
        },
        mounted() {
            setInterval(() => {
                this.active++;
                if (this.active === this.imglist.length) {
                    this.active = 0;
                }
            }, 1000);
        },
    })

</script>
</body>
</html>
